<template>
    <div class="my-tag" @dblclick="handelClick">
        <input class="input" type="text" placeholder="输入标签" 
            v-if="isEdit" 
            ref="inp" 
            v-focus 
            @blur="isEdit = false"
            :value="value" 
            @keyup.enter="handleEnter"
        >
        <div class="text" v-else>
            {{ value }}
        </div>
    </div>
</template>

<script>
export default {
    props: { value: String },
    data() {
        return {
            isEdit: false
        }
    },
    methods: {
        handelClick() {
            this.isEdit = true
        },
        handleEnter(e) {
            this.$emit('input', e.target.value)
            this.isEdit = false
        }
    }
}

</script>

<style lang="less" scoped>
.my-tag {
    cursor: pointer;

    .input {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;

        &::placeholder {
            color: #666;
        }
    }
}
</style>
